import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:old_shop/common/appbar/appbar.dart';

class FriendPage extends StatefulWidget {
  @override
  State<FriendPage> createState() => _FriendPageState();
}

class _FriendPageState extends State<FriendPage> with AutomaticKeepAliveClientMixin {
  final data = [
    {
      "url": "https://media.w3.org/2010/05/sintel/trailer.mp4",
      "img":
          "https://img-blog.csdnimg.cn/20190301125102646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAxMDE5OA==,size_16,color_FFFFFF,t_70"
    },
    {
      "url":
          "https://vod-progressive.akamaized.net/exp=1670491661~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F2670%2F7%2F188350983%2F623685558.mp4~hmac=d6529da7540b41653fcde438698e402f87af7aff570fca0ebbf17f3a3796d7d5/vimeo-prod-skyfire-std-us/01/2670/7/188350983/623685558.mp4",
      "img":
          "https://img-blog.csdnimg.cn/20190301125255914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAxMDE5OA==,size_16,color_FFFFFF,t_70"
    },
    {
      "url": "https://www.w3schools.com/html/movie.mp4",
      "img":
          "https://img-blog.csdnimg.cn/20190301125528758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAxMDE5OA==,size_16,color_FFFFFF,t_70"
    },
    {
      "url":
          "https://vod-progressive.akamaized.net/exp=1670491711~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F2671%2F7%2F188355959%2F625866489.mp4~hmac=6de2b340959194b1226bb79b0185b374bb641d55d3be8421d2cc83841909873f/vimeo-prod-skyfire-std-us/01/2671/7/188355959/625866489.mp4",
      "img":
          "https://img-blog.csdnimg.cn/20190301125640791.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAxMDE5OA==,size_16,color_FFFFFF,t_70"
    },
  ];

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: NormalAppbar.normal(title: "发现", leading: const SizedBox()),
      body: ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, index) {
          return _Cell(model: data[index]);
        },
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

class _Cell extends StatelessWidget {
  final Map<String, dynamic> model;
  const _Cell({Key? key, required this.model}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => Navigator.pushNamed(context, '/video', arguments: {"url": model['url']}),
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            height: 200,
            width: double.infinity,
            margin: const EdgeInsets.only(left: 12, right: 12, top: 12),
            child: PhysicalModel(
              borderRadius: BorderRadius.circular(12),
              clipBehavior: Clip.antiAlias,
              color: Colors.white,
              child: CachedNetworkImage(
                imageUrl: model['img'],
                fit: BoxFit.cover,
              ),
            ),
            foregroundDecoration: BoxDecoration(
              color: Colors.black.withOpacity(0.4),
              borderRadius: BorderRadius.circular(12),
            ),
          ),
          Icon(
            Icons.play_circle_fill_sharp,
            color: Colors.white,
            size: 50,
          )
        ],
      ),
    );
  }
}
